<div class="mat-input-wrapper">
  <div class="mat-input-flex">
    <div class="mat-input-prefix" *ngIf="_prefixChildren.length">
      <ng-content select="[mdPrefix], [matPrefix]"></ng-content>
    </div>

    <div class="mat-input-infix" [class.mat-end]="align == 'end'">
      <ng-content selector="input, textarea"></ng-content>

      <span class="mat-input-placeholder-wrapper">
        <label class="mat-input-placeholder"
               [attr.for]="_mdInputChild.id"
               [class.mat-empty]="_mdInputChild.empty && !_shouldAlwaysFloat"
               [class.mat-float]="_canPlaceholderFloat"
               [class.mat-accent]="color == 'accent'"
               [class.mat-warn]="color == 'warn'"
               *ngIf="_hasPlaceholder()">
          <ng-content select="md-placeholder, mat-placeholder"></ng-content>
          {{_mdInputChild.placeholder}}
          <span class="mat-placeholder-required" *ngIf="!hideRequiredMarker && _mdInputChild.required">*</span>
        </label>
      </span>
    </div>

    <div class="mat-input-suffix" *ngIf="_suffixChildren.length">
      <ng-content select="[mdSuffix], [matSuffix]"></ng-content>
    </div>
  </div>

  <div class="mat-input-underline" #underline
       [class.mat-disabled]="_mdInputChild.disabled">
    <span class="mat-input-ripple"
          [class.mat-accent]="color == 'accent'"
          [class.mat-warn]="color == 'warn'"></span>
  </div>

  <div class="mat-input-subscript-wrapper" [ngSwitch]="_getDisplayedMessages()">
    <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
      <ng-content select="md-error, mat-error"></ng-content>
    </div>

    <div class="mat-input-hint-wrapper" *ngSwitchCase="'hint'"
      [@transitionMessages]="_subscriptAnimationState">
      <div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
      <ng-content select="md-hint:not([align='end']), mat-hint:not([align='end'])"></ng-content>
      <div class="mat-input-hint-spacer"></div>
      <ng-content select="md-hint[align='end'], mat-hint[align='end']"></ng-content>
    </div>
  </div>
</div>
